import React from 'react';
import bScroll from '@better-scroll/core';
import moment from 'moment';
import { getScrollX } from '../../assets/js/utils/index';
import './index.css';

class ProgressBar extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            aWidth: 0
        }
        this.myScroll = null;
        this.timer = null;
        this.index = 0;
        this.pageRef = React.createRef();
    }

    UNSAFE_componentWillReceiveProps(nextProps){
        this.setProgressWidth(nextProps.percent);
        this.carousel(nextProps);
        this.eventScroll();
    }

    //支持滚动条滚动
    eventScroll(){
        this.myScroll = new bScroll('.page', {
            freeScroll: true,
            scrollX: true,
            scrollY: false
        });
    }

    //设置滚动条宽度
    setProgressWidth(percent){
        const barWidth = document.getElementById('progressBar').offsetWidth;
        const proWidth = ((barWidth * percent)/100).toFixed(2);
        this.setState({ aWidth: proWidth });
    }

    //改变时间刻度位置
    changeTimeLocation(e){
        const target = e.target.getAttribute('target');
        if(target && target === 'progress'){
            const { left } = this.pageRef.current.getBoundingClientRect();
            const { scrollerWidth } = this.myScroll;
            const scrollX = getScrollX(document.getElementById('progressBar').style.transform);
            const offsetX = scrollX < 0 ? Number((e.clientX-left-scrollX).toFixed(2)) : Number((e.clientX - left).toFixed(2));
            const myPercent = offsetX >= scrollerWidth ? 1 : (offsetX/scrollerWidth).toFixed(2);
            this.setPointPosition(myPercent);
        }
    }

    //设置当前时刻
    setPointPosition(myPercent=0){
        const { list } = this.props;
        const startTime = moment(list[0].time, 'HH:mm');
        const endTime = moment(list.slice(-1)[0].time, 'HH:mm');
        const allMinutes = endTime.diff(startTime, 'minute');
        const preMinutes = Math.round(allMinutes*myPercent);
        const aTime = startTime.add(preMinutes, 'minutes').format('HH:mm');
        this.props.setPointPosition({ predictTime: aTime, prePercent: myPercent*100 });
    }

    //时刻轮播
    carousel({ list, carousel, predictTime }){
        clearInterval(this.timer);
        if(carousel){
            const preMoment = moment(predictTime, 'HH:mm');
            const step = (100/list.length).toFixed(2);
            for(let i = 0, len = list.length; i < len; i++){
                if(moment(list[i], 'HH:mm').isAfter(preMoment)){
                    this.index = i < 1 ? 0 : i-1;
                    break;
                }
            }
            this.timer = setInterval(() => {
                if(this.index > list.length-1){ this.index = -1; }
                this.index += 1;
                const predict = list[this.index] || list.slice(-1)[0];
                this.props.setPointPosition({ predictTime: predict, prePercent: step*(this.index) });
            }, 2000);
        }else{
            clearInterval(this.timer);
        }
    }

    render(){
        const { aWidth } = this.state;
        const { list, percent, prePercent } = this.props;
        const textPos = Number(percent) + 15;
        return (
            <div className="page" ref={this.pageRef}>
                <div className="progress-bar" id="progressBar" onClick={(e) => this.changeTimeLocation(e)}>
                    {
                        list.length > 0 ? list.map((item, index) => {
                            return (
                                <div key={index} className={item.hide ? "step none" : "step"}><div className="text">{item.time}</div></div>
                            )
                        }) : ''
                    }
                    {/* 进度条 */}
                    <div target="progress" className="progression" style={{width:aWidth+'px'}}></div>
                    <div target="progress" className="dash-line"></div>
                    {/* 指针位置 */}
                    <div className="devider" style={{left:percent+'%'}}>
                        <div className="devider-line"></div>
                        <div className="devider-point"></div>
                        <div className="devider-needle"></div>
                    </div>
                    <div className="predict-text" style={{left:textPos+'%'}}>预报</div>
                    {/* 滑动按钮 */}
                    <div className="point" style={{left:prePercent+'%'}}></div>
                </div>
            </div>
        )
    }
}

export default ProgressBar;